<template>
  <div id="login">
    <div id="form-wrapper">
      <h1>家校宝后台管理系统</h1>
      <a-form id="form" :form="form" @submit="handleSubmit">
        <a-form-item
          :validate-status="userNameError() ? 'error' : ''"
          :help="userNameError() || ''"
        >
          <a-input
            v-decorator="[
          'userName',
          {rules: [{ required: true, message: 'Please input your username!' }]}
        ]"
            placeholder="Username"
          >
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-item>
        <a-form-item
          :validate-status="passwordError() ? 'error' : ''"
          :help="passwordError() || ''"
        >
          <a-input
            v-decorator="[
          'password',
          {rules: [{ required: true, message: 'Please input your Password!' }]}
        ]"
            type="password"
            placeholder="Password"
          >
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            :loading="logining"
            type="primary"
            html-type="submit"
            :disabled="hasErrors(form.getFieldsError())"
          >Log in</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import Api from "@/api";
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
export default {
  name: "Login",
  data() {
    return {
      logining: false,
      hasErrors,
      form: this.$form.createForm(this)
    };
  },
  mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("userName") && getFieldError("userName");
    },
    // Only show error after a field is touched.
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("password") && getFieldError("password");
    },
    handleSubmit(e) {
      const this_ = this;
      this_.logining = true;
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          Api.UserLogin(values).then(res => {
            if (res.success) {
              this_.logining = false;
              if (res.data.result) {
                Cookies.set("token", res.data.result.token);
                this.$store.commit("SET_USER_LOGINED", true);
                this.$router.push({
                  path: "/"
                });
                //  获取菜单
                this.$store.dispatch("SET_USER_MENUS");
              }
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" type="text/css" scoped>
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #18bf94;
}
#form-wrapper {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 5px 5px #666;
  transition: all 0.6s;
  &:hover {
    box-shadow: -5px -5px 5px #666;
  }
  & h1 {
    margin-top: 20px;
    color: #18bf94;
    font-size: 20px;
  }
}
#form {
  margin: 0 auto;
  padding: 30px;
  width: 600px;
}
</style>